<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简书首页</title>
    <link rel="stylesheet" href="font_6qi281tlo4p/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            outline:none;
            box-sizing: border-box;
            list-style: none;
            border: 0;
        }

        header{
            height: 100px;
            line-height: 100px;
        }
        .content{
            width: 80%;
            margin: 0 auto 0; 
            
        }
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .content section{
            width: 50%;
            float: left;

            height: 600px;
            margin-right: 60px;
        }
        .content aside{
            width: 30%;
            float: left;

            height: 600px;
        }
        footer{
            background-color: green;
            height: 100px;
        
        }

        .fz{

            font-size: 20px;
            color:gray;
        }
   
        .timg{
            width: 30%;
            float: right;
            
        }
        #magnifying{
            position: relative;
            right: 28px;
        }
        #pen{
            position: relative;
            right: 75px;
            top: 3px;
        }
        #logo{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="wap">
        <header>
            <div >
              <img id="logo" src="images/logo.png" width="100px" height="56px">
              <span style="color:red;" id="page" style="margin-left: 20px;">首页&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span id="app">下载App&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <input id="search" type="search" placeholder="搜索" style="background-color: rgb(204, 202, 202); border-radius: 8px; width: 250px; height: 30px;">
              <span class="iconfont fz" id="magnifying">&#xe653;</span>
              &nbsp;&nbsp;&nbsp;&nbsp;<span>登录&nbsp;&nbsp;&nbsp;</span>
              <span class="iconfont fz" >&#xe636;</span>
              <input type="reset" value="注册" id="reset-btn" name="reset-btn" style="background-color: rgb(231, 220, 220); margin: 2px; border-radius: 20px; width:50px; height: 25px;"> 
              <input type="button" value="写文章" id="reg-btn" name="reg-btn" style="background-color: rgb(241, 129, 129); margin: 2px; border-radius: 20px; width:70px; height: 30px;">
              <span class="iconfont fz"  id="pen">&#xe61b;</span>
            </div>
        </header>
        <div class="content clearfix">
            <section>
                <img src="images/home.png" style="width: 100%; height: 300px;">
                <div>
                    <h5 style="width: 70%; float: left; height: 100px; ">21句正能量的句子，让你在自律路上多点思考
                        <span  style="font-size: 10px; ">1.如果非要说成功有捷径，我想应该是每天做一点点有益小事，持续执行
                        保持自律状态，2.当我们每天带着开天辟地的隆重感，去把平凡事情完成好。
                        </span>
                    </h5>
                    <img id="timg" src="images/timg.jpg" style="width: 30%; float: right;height: 100px;">
                </div>
                <div>
                    <h5 style="width: 70%; float: left; height: 100px; ">坚持跑步十四年，我一斤没瘦
                        <span  style="font-size: 10px; ">1.不知不觉，从2005年的春天开始跑步，到今年整整十四年了，
                            我从一开始个人孤独的跑步，最多跑个五公里，到拖着仇先生一起跑，慢慢加长到十公里，直……
                        </span>
                    </h5>
                    <img id="timg" src="images/timg1.jpg" style="width: 30%; float: right;height: 100px;">
                </div>
            </section>
            <aside>
                <img src="images/recom01.png" style="width: 100%;">
                <img src="images/recom02.png" style="width: 100%;">
                <img src="images/recom03.png" style="width: 100%;">
                <img src="images/recom04.png" style="width: 100%;">
            </aside>
        </div>
        <footer>简书网站底部，版权，ICP备案号</footer>
    </div>
</body>
</html>